<template>
  <div class="analysis">
    <h2>整体设备监控分析</h2>
    <a-row style="margin-top: 0" :gutter="[24, 24]">
      <a-col :sm="24" :md="12" :xl="6">
        <chart-card class="analysis-card" :loading="loading" :title="$t('totalSales')" :total="monitorTime + '小时'"> <!-- 总检测时长-->
          <a-tooltip :title="'设备正常工作时长'" slot="action">            <!-- 问号的提升文字-->
            <a-icon type="info-circle-o"/>
          </a-tooltip>
          <div>
            <trend style="margin-right: 16px" :term="$t('wow')" :percent="12" :is-increase="true"
                   :scale="0"/><!-- 同州比-->
            <trend :term="$t('dod')" :target="100" :value="89" :scale="0"/><!-- 日环比-->
          </div>
          <div slot="footer">{{ $ta('daily|duration', 'p') }}<span>：16小时</span></div><!-- 日均在线时长-->
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6">
        <chart-card class="analysis-card" :loading="loading" :title="$t('visits')" total="2"><!-- 在线设备数-->
          <a-tooltip :title="$t('introduce')" slot="action"><!-- 问号的提升文字-->
            <a-icon type="info-circle-o"/>
          </a-tooltip>
          <div>
            <!-- 波浪图，未知-->
            <mini-area :mylist="coverList"/>
          </div>
          <div slot="footer">{{ $ta('daily|visits', 'p') }}<span>：2</span></div><!-- 日均在线设备数-->
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6">
        <chart-card class="analysis-card" :loading="loading" :title="$t('payments')" total="18h"><!-- 支付笔数-->
          <a-tooltip :title="$t('introduce')" slot="action">
            <a-icon type="info-circle-o"/>
          </a-tooltip>
          <div>
            <mini-bar/><!-- 柱状图 未知-->
          </div>
          <div slot="footer">{{ $t('conversion') }} <span>60%</span></div><!-- 转换率-->
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6"><!-- 4-->
        <chart-card class="analysis-card" :loading="loading" :title="$t('operating')" total="4%"><!-- 运营活动效果-->
          <a-tooltip :title="$t('introduce')" slot="action">
            <a-icon type="info-circle-o"/>
          </a-tooltip>
          <div>
            <mini-progress target="10" percent="4" color="red" height="8px"/>
          </div>
          <div slot="footer" style="white-space: nowrap;overflow: hidden">
            <trend style="margin-right: 16px" :term="$t('wow')" :percent="12" :is-increase="true"
                   :scale="0"/>
            <trend :term="$t('dod')" :target="100" :value="89" :scale="0"/>
          </div>
        </chart-card>
      </a-col>
    </a-row>
    <a-card class="analysis-card" :loading="loading" style="margin-top: 24px" :bordered="false" :body-style="{padding: '24px'}">
      <div class="salesCard">
        <a-tabs default-active-key="1" size="large"
                :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
          <div class="extra-wrap" slot="tabBarExtraContent">
            <div class="extra-item">
              <a @click="changeChartByDate('本日')">{{ $t('day') }}</a>
              <a @click="changeChartByDate('本周')">{{ $t('week') }}</a>
              <!--              <a @click="changeChartByDate('本年')">{{ $t('month') }}</a>-->
              <a @click="changeChartByDate('本年')">{{ $t('year') }}</a>
            </div>
            <a-range-picker :style="{width: '256px'}"></a-range-picker>
          </div>
          <a-tab-pane loading="true" :tab="$t('sales')" key="1"><!-- 下面的标题1 -->
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="20" :xs="24">
                <share-dataset v-if="isToday"/>
                <calendar-pie v-if="isWeek"/>
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <ranking-list :title="$ta('stores|sales|ranking', 'p')" :list="rankList"/>
                <!-- 右面第一个界面-->
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane :tab="$t('visits')" key="2">
            <a-row><!-- 下面的标题2 -->
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <bar :title="$ta('visits|trend', 'p')"/>
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <ranking-list :title="$ta('stores|sales|ranking', 'p')" :list="rankList"/>
                <!-- 右面第二个界面-->
              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card>

    <!--    Echarts表格-->
<!--    <a-row style="margin: 0 -12px">-->
<!--      <a-card>-->
<!--        <a-col style="padding: 0 12px" :xl="12" :lg="24" :md="24" :sm="24" :xs="24">-->
<!--          &lt;!&ndash;          <echarts-test></echarts-test>&ndash;&gt;-->
<!--        </a-col>-->
<!--        <a-col style="padding: 0 12px" :xl="12" :lg="24" :md="24" :sm="24" :xs="24">-->
<!--          &lt;!&ndash;          <share-dataset/>&ndash;&gt;-->
<!--        </a-col>-->
<!--      </a-card>-->
<!--    </a-row>-->

<!--    <a-row style="margin: 0 -12px">-->
<!--      <a-col style="padding: 0 12px" :xl="12" :lg="24" :md="24" :sm="24" :xs="24">-->
<!--        <a-card class="analysis-card" :loading="loading" :bordered="false" style="margin-top: 24px" :title="$t('search')">&lt;!&ndash; 搜索&ndash;&gt;-->
<!--          <hot-search/>-->
<!--        </a-card>-->
<!--      </a-col>-->
<!--      <a-col style="padding: 0 12px" :xl="12" :lg="24" :md="24" :sm="24" :xs="24">-->
<!--        <a-card class="analysis-card" :loading="loading" :bordered="false" style="margin-top: 24px;" :title="$t('proportion')">-->
<!--          <sales-data/>-->
<!--          <a-radio-group slot="extra" style="margin: -12px 0">-->
<!--            <a-radio-button value="a">{{ $t('all') }}</a-radio-button>-->
<!--            <a-radio-button value="b">{{ $t('online') }}</a-radio-button>-->
<!--            <a-radio-button value="c">{{ $t('stores') }}</a-radio-button>-->
<!--          </a-radio-group>-->
<!--        </a-card>-->
<!--      </a-col>-->
<!--    </a-row>-->
  </div>
</template>

<script>
import ChartCard from '../../../components/card/ChartCard'
import MiniArea from '../../../components/chart/MiniArea'
import MiniBar from '../../../components/chart/MiniBar'
import MiniProgress from '../../../components/chart/MiniProgress'
import Bar from '../../../components/chart/Bar'
// import BarCH4 from '../../../components/chart/BarCH4'
// import BarCO from '../../../components/chart/BarCO'
import RankingList from '../../../components/chart/RankingList'
// import HotSearch from './HotSearch'
// import SalesData from './SalesData'
import Trend from '../../../components/chart/Trend'
import axios from "axios";

import {format} from 'date-fns'
import ShareDataset from "@/pages/components/echarts/ShareDataset";
import CalendarPie from "@/pages/components/echarts/CalendarPie";

const rankList = []

for (let i = 0; i < 8; i++) {
  rankList.push({
    name: '环滨湖道' + i + '号',
    total: 1234.56 - i * 100
  })
}

export default {
  name: 'Analysis',
  i18n: require('./i18n'),
  data() {
    // 面积波浪图设置
    this.chartSettings = {
      stack: {'用户': ['访问用户', '下单用户']},
      area: true
    }
    return {
      // 監測時長
      monitorTime: 0,
      tablename: "datas",
      timer: null,
      rankList,
      loading: true,
      isToday: true,
      isWeek: false,
      isYear: false,
      coverList: [3, 5, 2, 4, 1],
      // 面积波浪图数据
      chartData: {
        columns: ['日期', '访问用户', '下单用户', '下单率'],
        rows: [
          {'日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32},
          {'日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26},
          {'日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76},
          {'日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49},
          {'日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323},
          {'日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78}
        ]
      },
    }
  },
  computed: {
    test12() {
      return 3;
    }
  },
  methods: {
    setTimer() {
      if (this.timer == null) {
        this.timer = setInterval(() => {
          this.getCoverList()
          axios.get("http://119.3.218.80:8080/getLatestOne?tablename=" + this.tablename)
              .then(res => {
                    // console.log(res.data);
                    this.monitorTime = new Date(res.data.time).getHours() * 7;
                  }
              )
              .catch(err => {
                console.log(err)
                this.$message.error('访问后端失败，请检查网络连接');
              })
        }, 3000)
      }
    },
    getCoverList() {
      axios.get("http://119.3.218.80:8080/getLatestByNum/" + this.tablename + "/15")
          .then(res => {
            res.data.forEach(item => {
              const beginDay = new Date(item.time).getTime();
              if (this.coverList.length >= 15) {
                for (let i = 0; i < 15; i++) {
                  this.coverList.shift()
                }
                this.coverList.push({
                  x: format(new Date(beginDay), "HH:mm:ss"),
                  y: `${item.co}%`
                })
              } else {
                this.coverList.push({
                  x: format(new Date(beginDay), "HH:mm:ss"),
                  y: `${item.co}%`
                })
              }
            })
          })
          .catch(err => {
            console.log(err)
            this.$message.error('访问后端失败，请检查网络连接');
          })
    },
    changeChartByDate(dateType) {
      switch (dateType) {
        case '本日':
          this.isToday = true
          this.isWeek = false
          this.isYear = false
          break
        case '本周':
          this.isToday = false
          this.isWeek = true
          this.isYear = false
          break
        case '本年':
          this.isToday = false
          this.isWeek = false
          this.isYear = true
          break
      }
    }
  },
  created() {
    clearInterval(this.timer)
    this.timer = null
    this.setTimer()
    setTimeout(() => this.loading = !this.loading, 1000)
  },// HotSearch, SalesData,BarCH4
  beforeDestroy() {
    // 每次离开当前界面时，清除定时器
    clearInterval(this.timer)
    this.timer = null
  },
  // BarCO
  components: {CalendarPie, ShareDataset, Trend, RankingList, Bar, MiniProgress, MiniBar, MiniArea, ChartCard,}// HotSearch, SalesData
}
</script>

<style lang="less" scoped>
.analysis-card {
  background-color: rgba(0, 0, 0, 0.2);
}
.extra-wrap {
  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a:not(:first-child) {
      margin-left: 24px;
    }
  }
}

@media screen and (max-width: 992px) {
  .extra-wrap .extra-item {
    display: none;
  }
}

@media screen and (max-width: 576px) {
  .extra-wrap {
    display: none;
  }
}

</style>
